import classNames from 'classnames';
import React, { useContext } from 'react';
import RowContext from '../Row/RowContext';
type ColSpanType = number | string;

type FlexType = number | 'none' | 'auto' | string;

export interface ColSize {
  flex?: FlexType;
  span?: ColSpanType;
  order?: ColSpanType;
  offset?: ColSpanType;
  push?: ColSpanType;
  pull?: ColSpanType;
}
export interface ColProps extends React.HTMLAttributes<HTMLDivElement> {
  flex?: FlexType;
  span?: ColSpanType;
  order?: ColSpanType;
  offset?: ColSpanType;
  push?: ColSpanType;
  pull?: ColSpanType;
  xs?: ColSpanType | ColSize;
  sm?: ColSpanType | ColSize;
  md?: ColSpanType | ColSize;
  lg?: ColSpanType | ColSize;
  xl?: ColSpanType | ColSize;
  xxl?: ColSpanType | ColSize;
  prefixCls?: string;
}

import './index.less';

export default function Col(props: ColProps) {
  const {
    flex,
    offset,
    order,
    pull,
    push,
    span,
    xs,
    sm,
    md,
    lg,
    xl,
    xxl,
    children,
    prefixCls,
    className,
    style,
  } = props;

  const { wrap, gutter } = useContext(RowContext);

  const cn = classNames(
    prefixCls,
    'ant-col',

    {
      [`ant-col-${span}`]: span !== undefined,
      [`ant-col-order-${order}`]: order,
      [`ant-col-offset-${offset}`]: offset,
      [`ant-col-push-${push}`]: push,
      [`ant-col-pull-${pull}`]: pull,
    },
    className,
  );

  console.log({ gutter });

  const mergedStyle: React.CSSProperties = {};
  // Horizontal gutter use padding
  if (gutter && gutter[0] > 0) {
    const horizontalGutter = gutter[0] / 2;
    mergedStyle.paddingLeft = horizontalGutter;
    mergedStyle.paddingRight = horizontalGutter;
  }

  if (gutter && gutter[1] > 0) {
    const verticalGutter = gutter[1] / 2;
    mergedStyle.paddingTop = verticalGutter;
    mergedStyle.paddingBottom = verticalGutter;
  }

  console.log({ mergedStyle });

  return (
    <div className={cn} style={{ ...mergedStyle, ...style }}>
      {children}
    </div>
  );
}
